<template>
  <div class="table" v-if="tableData">
    <el-table :data="tableData" style="width: 100%" @selection-change="changeFun">

      <template v-for="(item,index) in tabelHeader">

        <el-table-column v-if="item.type == 'selection'" type="selection" width="55"> </el-table-column>
        <el-table-column :prop="item.key" :label="item.value" v-if="item.type == 'text'" :width="item.width">
          <template slot-scope="scope">
            <el-tooltip placement="top" popper-class="myTooltip" v-if="item.showTooltip && !!scope.row[item.tooltipTextKey]">
              <div slot="content"><div v-html="scope.row[item.tooltipTextKey]"></div></div>
              <div class="tb-text">
                  <!--@click="openVoice(item.key,scope.row)"-->
                <span class="table-txt" :class="{'text-limit':!!item.maxLimit}" :style="{'-webkit-line-clamp':item.maxLimit,'color':scope.row[item.colorkey]}">
                  <img class="voice-pic" :class="{cur:!!scope.row[item.juckKey]}" v-if="!!scope.row[item.iconKey]" :src="scope.row[item.iconKey]" :style="{width:item.iconSize}" @click="textIconClick(item,scope.row)">

                  <span class="circle-text" v-if="!!item.circleColor && scope.row[item.circleColor]" :style="{background: scope.row[item.circleColor]}"></span>
                  {{ scope.row[item.key] }}
                </span>
              </div>
            </el-tooltip>
            <div class="tb-text" v-else>
              <!--@click="openVoice(item.key,scope.row)"-->
              <span class="table-txt" :class="{'text-limit':!!item.maxLimit}" :style="{'-webkit-line-clamp':item.maxLimit,'color':scope.row[item.colorkey]}">
                  <img class="voice-pic" :class="{cur:!!scope.row[item.juckKey]}" v-if="!!scope.row[item.iconKey]" :src="scope.row[item.iconKey]" :style="{width:item.iconSize}" @click="textIconClick(item,scope.row)">

                  <span class="circle-text" v-if="!!item.circleColor && scope.row[item.circleColor]" :style="{background: scope.row[item.circleColor]}"></span>
                  {{ scope.row[item.key] }}
                </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.key" :label="item.value" v-if="item.type == 'rich-text'" :width="item.width">
          <template slot-scope="scope">
            <div class="tb-text">

              <span class="table-txt" :class="{'text-limit':!!item.maxLimit}" :style="{'-webkit-line-clamp':item.maxLimit}" v-html="scope.row[item.key]"></span>
            </div>
          </template>
        </el-table-column>

        <el-table-column :prop="item.key" :label="item.value" v-if="item.type == 'image'" :width="item.width">
          <template slot-scope="scope">

            <div class="advert-picBox flex-cen-xy" v-if="item.canClick == 0">
              <img v-if="!!scope.row[item.key]" class="advert-pic" :src="scope.row[item.key]" :style="{width:item.iconSize}">
            </div>
            <viewer class="advert-picBox flex-cen-xy" v-else>
              <img v-if="!!scope.row[item.key]" class="advert-pic" :src="scope.row[item.key]" :style="{width:item.iconiSze}">
            </viewer>
          </template>
        </el-table-column>
        <el-table-column :prop="item.key" v-if="item.type == 'button'" :label="item.value" :width="item.width">
          <template slot-scope="scope">
            <div v-if="item.btnLis.length>0">
              <!--:type="items.btntype"-->
              <el-button v-for="(items,indexs) in item.btnLis" :key="indexs"  type="text" size="small"
                         v-if="scope.row[items.judeKey] == items.judeValue"
                         :disabled="!!items.disabled"
                         @click="tableCellClick(items.type,scope.row)">{{items.name}}
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.key" v-if="item.type == 'status'" :label="item.value" class="table-title">
            <template slot-scope="scope">
              <div class="tb-text">
                <img class="voice-pic" v-if="!!checkIdInArr(scope.row[item.judeKey],item.status.data).icon" :src="checkIdInArr(scope.row[item.judeKey],item.status.data).icon"
                     :style="{width:checkIdInArr(scope.row[item.judeKey],item.status.data).iconSize}">
                <span v-if="checkIdInArr(scope.row[item.judeKey],item.status.data)" :style="{ color: checkIdInArr(scope.row[item.judeKey],item.status.data).statuscolor }" >{{ checkIdInArr(scope.row[item.judeKey],item.status.data).statusname }}</span>
                <span v-else :style="{ color: item.status.defulColor }">{{  scope.row[item.status.defulKeyName] }}</span>
              </div>
            </template>
          </el-table-column>






      </template>
    </el-table>
  </div>
</template>

<script>
  export default {
    props: {
      // 表头
      tabelHeader: {
        type: Array,
        default: []
      },
      //表格数据
      tableData: {
        type: Array,
        default: []
      },

    },

    data(){
      return {
        multipleSelection:[],//多选值
      }
    },

    methods: {
      //操作
      tableCellClick(type, data) {
        let obj = {
          type: type,
          data: data
        }
        this.$emit("tableCellClick", obj);
      },
      textIconClick(item,data){

        if(!!item.juckKey){
          let obj = {
            type: item.key,
            data: data
          }
          this.$emit("tableCellClick", obj);
        }

      },
      checkIdInArr(id,arr){
        let str = false
        for(let i=0;i<arr.length;i++){
          if( arr[i].statusid == id ){
            str = arr[i]
            break
          }
        }
        return  str
      },
      //多选修改回调
      changeFun (val) {
        this.multipleSelection = val // 返回的是选中的列的数组集合
      },
    },

    mounted () {
      //console.log(this.tableData)
    }
  }
</script>

<style scoped>
  .tb-text{display: flex;align-items: center;}
  .advert-picBox{}
  .advert-pic{width: 100%;}
  .voice-pic{width: 100%;display: inline-block;}
  .cur{cursor: pointer;}
  .circle-text{display: inline-block;width: 6px;height: 6px;border-radius: 50%;}
  .text-limit{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; }

</style>
<style>

  .myTooltip{max-width: 400px;}

</style>




